<template>
  <div class="agree-wrapper" :style="{ height: offsetsHeight2 +'px' }">
    <div class="agreement-container">
      <div class="agreement">
        <h2 ref="agreeTitle">协议说明</h2>
        <p class="agreement-body" :style="{ height: agreementHeight + 'px'}">
          <span>（1）下列财产不属于赔偿范围</span><br>
          ①金银、珠宝、钻石、玉器、首饰、古币、古玩、古董、古书、古画、邮票、字画、艺术品、稀有金属、非流通货币等珍贵财物；<br>
          ②图章、文件、账册、图表、技术资料、计算机软件、计算机数据资料等无法鉴定价值的财产；<br>
          ③债券、票据、印花、息票、地契、股票、票证、有价证券、契约凭证、票据，以及有现金价值的磁卡、集成电路（IC）卡、储值卡、充值卡、SIM卡等卡类；<br>
          ④现金、流通的各种货币，以及电子货币、支票、电子支付帐户等非货币现钞形式的现金；<br>
          ⑤法律、行政法规禁止流通、禁止寄递的物品，包括但不限于:<br>
          a.武器、弹药,如枪支、子弹、炮弹、手榴弹、地雷、炸弹等；<br>
          b.易爆炸性物品，如雷管、炸药、火药、鞭炮等；<br>
          c.易燃烧性物品，包括液体、气体和固体，如汽油、煤油、桐油、酒精、生漆、柴油、气雾剂、气体打火机、瓦斯气瓶、磷、硫磺、火柴等；<br>
          d.易腐蚀性物品，如火硫酸、盐酸、硝酸、有机溶剂、农药、双氧水、危险化学品等；<br>
          e.放射性元素及容器，如铀、钴、镭、钚等；<br>
          f.烈性毒药，如铊、氰化物、砒霜等；<br>
          g.麻醉药物或管制类药品，如鸦片（包括罂粟壳、花、苞、叶）、吗啡、可卡因、海洛因、大麻、冰毒、麻黄素及其它制品等；<br>
          h.生化制品和传染性物品，如炭疽、危险性病菌、医药用废弃物等；<br>
          i.危害国家安全和社会政治稳定以及淫秽的出版物、宣传品、印刷品等；<br>
          j.妨害公共卫生的物品，如尸骨、动物器官、肢体、未经硝制的兽皮、未经药制的兽骨等；<br>
          k.国家法律、法规、行政规章明令禁止流通、寄递或进出境的物品，如国家秘密文件和资料、国家货币及伪造的货币和有价证券、仿真武器、管制刀具、珍贵文物、濒危野生动物及其制品等；<br>
          l.包装不妥，可能危害人身安全、污染或者损毁其他托运物品、设备的物品等；<br>
          ⑥活的动物（包装能确保服务人员安全的除外）；<br>
          ⑦物品的性质或其封装有伤害服务人员或污损设备嫌疑的。<br>
          <span>（2）下列原因造成的损失、费用和责任，不负责赔偿：</span><br>
          ①设计错误、工艺不善、内在缺陷或特性、自然渗漏、自然损耗、自然磨损、自燃或由于自身原因造成腐烂、变质、伤病、死亡等自身变化；<br>
          ②包装不当、包装完好但其内物品损坏、包装完好但其内物品丢失、实际承运物品与托运信息不符；<br>
          <span>（3）下列损失、费用和责任，不负责赔偿：</span><br>
          ①盘点时发现的损失，或其他不明原因的短量；<br>
          ②非外力造成机械或电气设备本身的损失；<br>
          ③超出提供投保职业服务的场所或地域范围发生的损失；<br>
          ④受损财产在修复或替换过程中进行的任何变更、性能增加或改进所产生的额外费用。<br>
        </p>
      </div>
    </div>
    <div class="agreement-checkbox" ref="checkBoxs">

      <span @click="changeAgree"><icon :type="icontype"></icon> <span>已仔细阅读以上内容</span></span>

    </div>
    <div class="step-next" ref="stepNexts" style="padding: 14px 5% 0;">
     <!-- <x-button type="primary" :disabled="!agreeCommit.agree" @click.native="goToInfo">确定
      </x-button>-->
      <x-button type="primary" :disabled="isDisabled" @click.native="goToInfo">确定
      </x-button>
    </div>
  </div>
</template>
<script>

  import {XButton, Icon} from 'vux'

  //import {} from  '../api/api'
  export default({
    data(){
      return {
        agreeCommit: {
          agree: false
        },

        icontype: 'circle',

        waybillNo: '',
        offsetsHeight: 0,
        checkBoxHeight: 0,
        stepNextHeight: 0,
        agreeTitleHeight: 0
      }
    },
    computed: {
      isDisabled() {
        if(this.icontype == 'circle') {
          return true
        } else {
          return false
        }
      },
      offsetsHeight2() {
        return this.offsetsHeight * 0.95
      },
      agreementHeight() {
        let a
        a = this.offsetsHeight2 - this.checkBoxHeight - this.stepNextHeight - this.agreeTitleHeight - 1
        console.log(a)
        return a
      }
    },
    components: {
      XButton,
      Icon
    },
    mounted() {
     this.getClientHeight()

    },
    methods: {
      goToInfo(){
        this.$router.replace({
          name: 'info',
          params: this.waybillNo
        })
      },
      getClientHeight() {
        this.waybillNo = this.$route.params.waybillNo
        this.offsetsHeight = document.body.clientHeight
        this.checkBoxHeight = this.$refs.checkBoxs.offsetHeight
        this.stepNextHeight = this.$refs.stepNexts.offsetHeight
        this.agreeTitleHeight = this.$refs.agreeTitle.clientHeight
      },
      changeAgree() {
        if(this.icontype == 'circle') {
          this.icontype = 'success'
        } else {
          this.icontype = 'circle'
        }
      }
    }
  })
</script>
<style lang="less" rel="stylesheet/less">
  @import "../common/flexBox.less";
  @mainColor: #e6454a;
  @bgColor: #f5f5f5;
  .agree-wrapper {
    .flexBox;

    .flexDire;

    .flexContent;

    /*协议内容区*/
    .agreement-container {
      -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
      -moz-box-flex: 1;         /* OLD - Firefox 19- */
      -webkit-flex: 1;          /* Chrome */
      -ms-flex: 1;              /* IE 10 */
      flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
      padding: 2% 5% 0;
      .agreement {

        border: 1px solid @mainColor;
        h2 {
          height: 2em;
          line-height: 2em;
          text-align: center;
          background: @mainColor;
          font-weight: bold;
          color: #fff;
          border-bottom: 1px solid @mainColor;
        }
        .agreement-body {
          background: #fff;
          -webkit-overflow-scrolling: touch;
          overflow-y: scroll;
          padding: 15px 10px;
          span {
            font-weight: bold;
          }
        }
      }
    }

    /*复选框区*/
    .agreement-checkbox {
      -webkit-flex: 0 0 40px; /* Chrome */
      -ms-flex: 0 0 40px; /* IE 10 */
      flex: 0 0 40px; /* NEW, Spec - Opera 12.1, Firefox 20+ */
      padding: 16px 5% 0;
      text-align: right;
      font-size: 16px;
      input {
        vertical-align: middle;
        margin-top: -2px;
        width: 15px;
        height: 15px;
      }
      .weui-icon {
        vertical-align: text-bottom;
        font-size: 21px;
      }
      .weui-icon-success {
        color: #636363;
      }
    }
  }

</style>
